<template>
  <div class="projects-page">
    <div class="projects-page-box" :class="classObj">
      <!-- v-for="item in dataList" :key="item.title" -->
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/11.jpg" alt="Image-1">
            <div class="pro-title-img">呼呼呼呼</div>
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/44.jpg" alt="Image-1">
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/22.jpg" alt="Image-1">
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/22.jpg" alt="Image-1">
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/22.jpg" alt="Image-1">
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
      <div class="pro-list">
        <div class="port-2 effect-3">
          <div class="image-box">
            <img src="../../assets/image/projects/33.jpg" alt="Image-1">
          </div>
          <div class="text-desc">
            <h3>Your Title</h3>
            <p>Lorem ipsum dolor liqua.</p>
            <a href="#" class="btn">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'Projects',
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('this.device=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
  data() {
    return {
      dataList: [
        {
          title: '我的主页名称1',
          src: '../../assets/image/projects/11.jpg',
          link: 'http://www.baidu.com',
          prot: `prot-${Math.floor(Math.random() * 3 + 1)}`,
          effect: `effect-${Math.floor(Math.random() * 3 + 1)}`,
        },
        {
          title: '我的主页名称2',
          src: '../../assets/image/projects/22.jpg',
          link: 'http://www.baidu.com',
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.projects-page {
  width: 100%;
  height: auto;
  .projects-page-box {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 20px;
    .pro-list {
      width: 300px;
      height: 210px;
      position: relative;
      margin-right: 20px;
      margin-bottom: 20px;
      border-radius: 10px;
      overflow: hidden;
      & > div {
        width: 100%;
        height: 100%;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
        .pro-title-img {
          width: 100%;
          position: absolute;
          top: 20px;
          text-align: center;
          color: #ffffff;
          opacity: 0.6;
        }
      }
    }
  }
  .mobile {
    padding: 0 2vw;
    justify-content: space-around;
    .pro-list {
      width: 44vw;
      height: 30vw;
      position: relative;
      margin-bottom: 4vw;
      margin-right: 0;
    }
  }
}
@import "~@/styles/hover-effects.scss";
img {
  width: 100%;
  height: 100%;
}
</style>
